<template>
  <div>
    <!-- banner -->
    <div class="banner"></div>
    <!-- 服务 -->
    <div class="server">
      <div class="content">
        <p class="title" style="text-align: center">产品与服务</p>
        <serve></serve>
      </div>
    </div>
    <!-- 行业场景 -->
    <div class="product">
      <p
        style="
          margin-top: 90px;
          text-align: center;
          font-size: 36px;
          font-weight: 500;
          color: #333333;
        "
      >
        适用行业及场景
      </p>
      <div class="box_Control">
        <div class="box_one">
          <div class="one_img2">
            <p></p>
          </div>
          <div class="Control_tab">
            <div class="tab_lefe">
              <div
                class="left_aa"
                :style="
                  index == 0
                    ? index == indexs
                      ? { marginTop: '34px', background: '#F5FAFF' }
                      : { marginTop: '34px' }
                    : index == indexs
                    ? { background: '#F5FAFF' }
                    : ''
                "
                v-for="(item, index) in tabsList"
                :key="index"
              >
                <span
                  :class="[indexs == index ? 'dsTabs' : 'dsTabs1']"
                  :style="
                    indexs == index
                      ? { borderLeft: '4px solid #0052D9' }
                      : { borderLeft: '4px solid rgba(255,255,255,0)' }
                  "
                  @click="tabStyle(index)"
                  >{{ item }}</span
                >
              </div>
            </div>
            <div
              v-if="indexs == index"
              class="tab_rgiht"
              v-for="(item, index) in talist"
              :key="index"
            >
              <p
                style="
                  width: 100%;
                  margin: 40px 0 20px 80px;
                  font-size: 26px;
                  font-weight: 600;
                  color: #000000;
                "
              >
                {{ item.title }}
              </p>
              <p
                style="
                  width: 720px;
                  margin-bottom: 40px;
                  margin-left: 80px;
                  font-size: 16px;
                  font-weight: 400;
                  color: #000000;
                "
                v-if="indexs == index"
              >
                {{ item.content }}
              </p>
              <span
                style="
                  width: auto;
                  position: absolute;
                  left: 80px;
                  bottom: 35px;
                "
                v-if="indexs == index"
              >
                <img style="border-radius: 4px" :src="item.url" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 功能 -->
    <div class="MyFunction">
      <p class="title" style="text-align: center">功能模块</p>
      <div class="content">
        <!-- <div class="iscontent"> -->
        <div class="bg"></div>
        <!-- </div> -->

        <!-- <img style="width: 100%" src="@/assets/home/function.png" alt="" /> -->
      </div>
    </div>
    <!-- 海量数据 -->
    <div class="data">
      <div class="content">
        <div class="title">海量数据，铸就强大行业优势</div>
        <div class="box_zs">
          <div class="item" v-for="(item3, index) in datum" :key="index">
            <img :src="item3.url" alt="" />
            <p class="text1">{{ item3.name }}</p>
            <p class="text2">{{ item3.gz }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 技术与支持 -->
    <div class="technics">
      <div class="content">
        <p class="title" style="text-align: center">技术与支持</p>
        <!-- <img src="@/assets/home/jxzc.png" alt="" /> -->
      </div>
    </div>
    <!-- saas产品 -->
    <div class="saas">
      <div class="content">
        <p class="title">产品优势</p>
        <div class="list">
          <div
            @click="check(index, item, $event)"
            :class="index == isNow ? 'itemNow' : 'item'"
            v-for="(item, index) of saasList"
          >
            <p
              :style="
                index == isNow
                  ? {
                      marginTop: '48px',
                      fontSize: '24px',
                      paddingLeft: '64px',
                      color: '#fff',
                      marginBottom: 0,
                    }
                  : ''
              "
            >
              {{ item.title }}
            </p>
            <p
              v-if="index == isNow"
              style="
                width: 49px;
                height: 4px;
                background: #fff;
                border-radius: 1px;
                margin-left: 64px;
                margin-top: 16px;
                margin-bottom: 43px;
              "
            ></p>

            <div
              v-if="index == isNow"
              style="
                width: auto;
                margin-left: 64px;
                margin-top: 16px;
                margin-bottom: 61px;
                font-size: 22px;
                font-weight: 500;
                color: #ffffff;
                line-height: 30px;
                letter-spacing: 4px;
              "
            >
              <div style="margin-bottom: 40px">
                <span style="margin-right: 110px">{{ item.item1 }}</span>
                <span>{{ item.item2 }}</span>
              </div>
              <div>
                <span style="margin-right: 110px">{{ item.item3 }}</span>
                <span>{{ item.item4 }}</span>
              </div>
            </div>
            <div v-else style="color: #999">
              <span
                style="margin-top: 30px; display: block; text-align: center"
                >{{ item.item1 }}</span
              >
              <span
                style="margin-top: 30px; display: block; text-align: center"
                >{{ item.item2 }}</span
              >

              <span
                style="margin-top: 30px; display: block; text-align: center"
                >{{ item.item3 }}</span
              >
              <span
                style="
                  margin-top: 30px;
                  margin-bottom: 28px;
                  display: block;
                  text-align: center;
                "
                >{{ item.item4 }}</span
              >
            </div>

            <img
              style="width: 56px; height: 56px"
              v-show="!(index == isNow)"
              :src="item.icon"
              alt=""
            />
            <img
              width="56px"
              v-show="index == isNow"
              :src="item.iconW"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 资讯动态 -->
    <div class="news">
      <div class="content">
        <div class="title">资讯动态</div>
        <p class="text1">关注平台公告资讯，了解行业最新法规动态。</p>
        <el-button @click="goNews()">查看全部</el-button>
        <div class="isisnew">
          <div class="item" v-for="(item, index) of newsType" :key="index">
            <div class="item_title">
              <img
                style="width: 24px; height: 24px"
                :src="require(`@/assets/home/news${index + 1}.png`)"
                alt=""
              />
              <span>{{ item }}</span>
            </div>
            <p
              @click="goDetail(element)"
              class="item_content"
              v-for="element of newList[item]"
            >
              {{ element.title }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="last">安全教育培训一体化解决方案</div>

    <!-- <img src="@/assets/home/serverBg.png" alt="" /> -->
  </div>
</template>

<script>
import serve from "@/components/serveNew.vue";
import axios from "@/utils/request";
export default {
  components: {
    serve,
  },

  data() {
    return {
      form: {},
      newsType: ["平台公告", "行业动态", "政策法规"],
      isNow: 0,
      indexs: "",
      tabsList: [
        "三项岗位人员在线培训",
        "特种设备作业人员在线培训",
        "一般工贸行业人员在线培训",
        "职业卫生行业在线培训",
        "企业安全生产在线培训",
        "职业技能等级认定在线培训",
        "建筑类从业人员在线培训",
        "交通运输行业在线培训",
      ],
      talist: [
        {
          title: "三项岗位人员在线培训学习系统",
          url: require("@/assets/home/tzzy.png"),
          content:
            "(应急管理局:电工、焊工、高处作业特种作人员及高危行业主要负责人及安全管理人员等)",
        },
        {
          url: require("@/assets/home/tzsb.png"),
          title: "特种设备作业人员在线培训学习系统",
          content:
            "(市场监管局: 安全管理人员、叉车、起重电梯、锅炉、压力容器、气瓶、焊接等)",
        },
        {
          title: "一般工贸行业管理人员在线培训学习系统",
          url: require("@/assets/home/ybgm.png"),
          content:
            "(一般工贸行业主要负责人及安全管理人员，实现线上报名、交费、培训、考试、发证等全流程线上操作)",
        },
        {
          title: "职业卫生行业在线培训学习系统",
          url: require("@/assets/home/zyws.png"),
          content:
            "(企业主要负责人，职业健康管理人员、单位或企业重点接害岗位人员、用人单位(医疗机构、诊所等) 医疗工作人员)",
        },

        {
          title: "企业安全生产在线培训学习系统",
          url: require("@/assets/home/zhpt.png"),
          content:
            "(企业负责人、管理人员及一线从业人员全员日常安全生产教育培训，全面提升企业员工安全生产职业系养和职业能力，使“全员培训”机制真正落地)",
        },
        {
          title: "职业卫生行业在线培训学习系统",
          url: require("@/assets/home/hgyq.png"),
          content:
            "(企业主要负责人，职业健康管理人员、单位或企业重点接害岗位人员、用人单位(医疗机构、诊所等) 医疗工作人员)",
        },
        {
          title: "建筑类从业人员在线培训学习系统",
          url: require("@/assets/home/qyaq.png"),
          content:
            "(建筑施工三项岗位人员、建筑施工企业安管人员、建筑施工现场专业人员)",
        },

        {
          title: "交通运输行业在线培训学习系统",
          url: require("@/assets/home/jtys.png"),
          content: "(运管局交通运输类企业主要负责人及安全管理人员)",
        },
      ],
      datum: [
        {
          icon: "icon iconfont icon-a-10guanliwodegongzhong",
          url: require("@/assets/home/pxgz.png"),
          name: "100+",
          gz: "各类培训工种",
        },
        {
          icon: "icon iconfont icon-kejianke",
          url: require("@/assets/home/zyjx.png"),
          name: "1000+",
          gz: "专业视频课程",
        },
        {
          icon: "icon iconfont icon-xueshiguanli",
          url: require("@/assets/home/kjxs.png"),
          name: "5000+",
          gz: "课程学时累计",
        },
        {
          icon: "icon iconfont icon-tiku",
          url: require("@/assets/home/pxdg.png"),
          name: "1000+",
          gz: "培训大纲课件",
        },
        {
          icon: "icon iconfont icon-tiku-2",
          url: require("@/assets/home/ggz.png"),
          name: "10万+",
          gz: "各工种全题库",
        },
      ],
      saasList: [
        {
          title: "平台优势",
          url: require("@/assets/home/saas1.png"),
          icon: require("@/assets/home/icon1.png"),
          iconW: require("@/assets/home/icon1W.png"),
          item1: "培训数智化",
          item2: "培训系统化",
          item3: "管理智能化",
          item4: "运营品牌化",
        },
        {
          title: "课程优势",
          url: require("@/assets/home/saas2.png"),
          icon: require("@/assets/home/icon2.png"),
          iconW: require("@/assets/home/icon2W.png"),
          item1: "课程内容优质",
          item2: "覆盖行业齐全",
          item3: "课程形式多样",
          item4: "持续优化更新",
        },
        {
          title: "题库优势",
          url: require("@/assets/home/saas3.png"),
          icon: require("@/assets/home/icon3.png"),
          iconW: require("@/assets/home/icon3W.png"),
          item1: "精准匹配课程",
          item2: "内容取材权威",
          item3: "题库数量庞大",
          item4: "及时更新优化",
        },
      ],
      newList: {
        平台公告: [],
        行业动态: [],
        政策法规: [],
      },
    };
  },
  methods: {
    goNews() {
      this.$router.push("/news");
    },
    goDetail(item) {
      this.$router.push({
        path: "/newDetail",
        query: {
          id: item.id,
          category: item.category,
        },
      });
    },
    getList(name) {
      axios({
        method: "get",
        // url:'/api/index/feedback/create',
        url: "https://b.taijieyun.com/admin/article/list",
        params: { page: 1, limit: 3, category: name },
      }).then((res) => {
        if (res.data.code == 200) {
          this.newList[name] = res.data.data.list;
          this.newList[name].map((item) => {
            item.create_time = item.create_time.split(" ")[0];
          });
        }
      });
    },
    handleScroll() {},
    tabStyle(e) {
      this.indexs = e;
    },
    check(num, item, e) {
      this.isNow = num;
      //   e.target.style.background = `url(${item.url})`;
      this.$nextTick(() => {
        document.getElementsByClassName(
          "itemNow"
        )[0].style.background = `url(${item.url})`;
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.newsType.map((item) => {
        this.getList(item);
      });
      document.getElementsByClassName(
        "itemNow"
      )[0].style.background = `url(${this.saasList[0].url})`;
    });
  },
  created() {},
};
</script>

<style  lang="scss" scoped>
.last {
  width: 100%;

  height: 108px;
  line-height: 108px;
  font-size: 36px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #0a54dc;
  text-align: center;
}
.news {
  @extend .hidden;
  height: 632px;
  width: 100%;
  background: url("@/assets/home/newsBg.png");
  background-position: 50%;
  min-width: 1320px;
  .content {
    .title {
      margin-top: 100px;
      color: #333333;
    }
    .text1 {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      margin: 0 0 36px;
    }
    ::v-deep {
      .el-button--default {
        height: 34px;
        background: #0052d9;
        color: #fff;
        line-height: 0.7;
        letter-spacing: 1px;
      }
    }
    .isisnew {
      background: #fff;
      height: 237px;
      width: 100%;
      margin-top: 33px;
      display: flex;
      justify-content: space-around;
      .item {
        width: 400px;
        height: 100%;
        // background: pink;
        @extend .hidden;
        .item_title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 40px 0 32px;
          span {
            letter-spacing: 1px;
            margin-left: 4px;
          }
          p {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
            letter-spacing: 1px;
          }
        }
        .item_content {
          margin-top: 20px;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .item_content:hover {
          color: #0052d9;
        }
      }
    }
    height: 632px;
    width: 1320px;
    margin: auto;
    // background: #0052d9;
    margin-bottom: 20px;
  }
}
.hidden {
  overflow: hidden;
}
li {
  list-style: none;
}
.title {
  margin-top: 98px;
  margin-bottom: 26px;
  font-size: 36px;
  font-weight: 500;
  color: #333333;
  letter-spacing: 3px;
}
.banner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 640px;
  background: url("@/assets/home/banner.png");
  background-position: 50%;
  min-width: 1320px;
  .text {
    // position: absolute;

    margin: auto;
    width: 1200px;
    .item1 {
      margin-top: 224px;
      font-size: 42px;
      color: #333333;
      letter-spacing: 2px;
      font-family: AlibabaPuHuiTiB;
    }
    .item2 {
    }
    .item3 {
    }
  }
}
.server {
  height: auto;
  width: 100%;
  min-width: 1320px;
  background: #fff;
  .content {
    .title {
      @extend .title;
    }
    width: 1320px;
    margin: auto;
    overflow: hidden;
  }
}
.product {
  width: 100%;
  height: 900px;
  overflow: hidden;
  background: url("@/assets/home/serverBg.png");

  .box_Control {
    height: 811px;
    // display: flex;
    padding-top: 25px;
    width: 100%;
    margin: auto;
    // background-color: #f8f9fd;
    .box_one {
      margin: auto;
      width: 1320px;
      .Control_tab {
        width: 1320px;
        height: 600px;
        display: flex;
        .tab_lefe {
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          width: 340px;
          height: 600px;
          background-color: rgba(255, 255, 255, 0.75);

          .left_aa {
            text-align: left;
            width: 340px;
            height: 60px;
            margin-top: 8px;
            display: flex;

            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            // line-height: 60px;
            // margin-left: 25px;
            span {
              padding-left: 50px;
              padding-right: 4px;
              width: 100%;
              display: block;
              //   margin: 0 auto;
              font-size: 18px;
              margin-top: 5px;
              cursor: pointer;
              &:hover {
                color: #0052d9;
              }
            }
          }
        }
        .tab_rgiht {
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          width: 980px;
          position: relative;
          //   padding: 40px 80px;
          float: right;
          height: 600px;
          background-color: #fff;
          span {
            width: 980px;
            display: block;
          }
        }
      }
    }
  }
}
.MyFunction {
  overflow: hidden;
  width: 100%;
  height: 1179px;
  .title {
    // @extend .title;

    margin: auto;
    width: 1320px;
    margin-bottom: 50px;
    margin-top: 100px;
  }

  .content {
    margin: auto;
    width: 95% !important;
    height: 894px;

    width: 100%;
    min-width: 1300px;
    .bg {
      width: 100%;
      height: 894px;

      background: url("@/assets/home/function.png");
      background-size: cover;
      background-position: 50%;
    }
  }
}
.data {
  @extend .hidden;
  height: 609px;
  width: 100%;
  background: url("@/assets/home/dataBg.png") no-repeat;
  background-size: cover;
  .content {
    .title {
      text-align: center;
      color: #fff;
      margin-bottom: 0;
      min-width: 1320px;
    }

    .box_zs {
      width: 1320px;
      height: 382px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      ul {
        width: 160px;
        height: 200px;
        margin-left: 15px;
        li {
          font-size: 54px;
          color: #ffffff;
        }
        p {
          font-size: 14px;
        }
      }
      .item {
        width: 264px;
        height: 286px;
        color: #fff;
        p {
          margin: 0;
        }
        .text1 {
          font-family: jiangsir;
          text-align: center;
          font-size: 60px;
        }
        .text2 {
          text-align: center;
          margin-top: 24px;

          font-size: 18px;
        }
      }
    }
  }
}
.technics {
  @extend .hidden;
  height: 855px;
  width: 100%;
  background: #fff;

  .content {
    position: relative;
    .title {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      @extend .title;
      width: 1320px;
      margin: auto;
      min-width: 1320px;
      margin-top: 100px;
    }
    width: auto;
    height: 855px;
    background: url("@/assets/home/jxzc.png");
    background-position: 50%;
    min-width: 1320px;
  }
}
.saas {
  @extend .hidden;
  width: 100%;

  height: 714px;
  //   background: black;
  background: #f7faff;
  .content {
    width: 100%;
    height: 714px;
    min-width: 1320px;

    .title {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      text-align: center;
      margin-bottom: 64px;
    }
    .list {
      margin: auto;
      width: 1320px;
      display: flex;
      justify-content: space-between;
      p {
        margin: 0;
        text-align: left;
      }
      .itemNow {
        background-size: 100% !important;
        width: 600px;
        height: 400px;

        img {
          margin-left: 64px;
        }
      }
      .item {
        cursor: pointer;
        box-sizing: border-box;
        padding-top: 56px;

        width: 320px;
        height: 400px;
        background: #fff !important;
        p {
          font-weight: 600;
          text-align: center;
        }
        img {
          margin-left: 50%;
          transform: translate(-50%, 0);
        }
        &:hover {
          color: #0052d9;
        }
      }
    }
  }
}
</style>